<template>
  <el-container>
    <el-main class="main">
      <row justify="space-between">
        <div class="float-left">
          <el-button @click="statusData.insertDialog=true" plain type="primary" size="small" icon="plus">新增
          </el-button>
        </div>
        <div class="float-right">
          <el-button circle size="small" icon="refresh" @click="handleRefresh"></el-button>
        </div>
      </row>
      <el-table :data="jobList" style="width: 100%">
        <el-table-column prop="id" label="任务ID" width="80" show-overflow-tooltip></el-table-column>
        <el-table-column prop="bean" label="bean对象" width="100" show-overflow-tooltip></el-table-column>
        <el-table-column prop="method" label="方法" width="auto" show-overflow-tooltip></el-table-column>
        <el-table-column prop="remark" label="备注" width="auto" show-overflow-tooltip></el-table-column>
        <el-table-column prop="cron" label="表达式" width="auto" show-overflow-tooltip></el-table-column>
        <el-table-column prop="status" label="状态" width="100" show-overflow-tooltip>
          <template #default="scope">
            <tag-dict :data="dict" :model-value="scope.row.status"/>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="auto" show-overflow-tooltip></el-table-column>
        <el-table-column prop="updateTime" label="修改时间" width="auto" show-overflow-tooltip></el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
          <template #default="scope">
            <el-button v-if="scope.row.status!=0" bg type="success" size="small"
                       @click="handleStart(scope.row.id)">
              启动
            </el-button>
            <el-button plain v-if="scope.row.status!=1" bg type="warning" size="small"
                       @click="handleStop(scope.row.id)">
              停止
            </el-button>
            <el-button plain bg type="primary" size="small" @click="handleEdit(scope.row)">修改</el-button>
            <el-button plain bg type="danger" size="small" @click="handleRemove(scope.row.id)">移除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog append-to-body v-model="statusData.updateDialog" title="任务执行时间修改" width="500px"
                 destroy-on-close
                 :close-on-click-modal="false">
        <el-form ref="uploadRef" :model="updateForm" label-width="120px" inline>
          <el-form-item label="Cron表达式:" prop="cron" required>
            <el-input v-model="updateForm.cron">
              <template #append>
                <el-link target="_blank" href="https://cron.qqe2.com/">在线生成器</el-link>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="备注:" prop="remark" required>
            <el-input v-model="updateForm.remark"/>
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button type="primary" @click="handleCronTest">确定</el-button>
          <el-button @click="statusData.updateDialog=false">取消</el-button>
        </template>
      </el-dialog>
      <el-dialog append-to-body v-model="statusData.insertDialog" title="新增定时任务" width="500px"
                 destroy-on-close
                 :close-on-click-modal="false">
        <el-form inline ref="addFormRef" :model="insertForm" label-width="100px">
          <el-form-item label="任务选择:" prop="temp" required>
            <el-select v-model="insertForm.temp">
              <el-option-group
                  v-for="item in taskList"
                  :key="item.bean"
                  :label="item.bean"
              >
                <el-option
                    v-for="method in item.method"
                    :key="item.bean+method"
                    :label="method"
                    @click="handleSelect(item.bean,method)"
                    :value="method"
                />
              </el-option-group>
            </el-select>
          </el-form-item>
          <el-form-item label="Cron表达式:" prop="cron" required>
            <el-input type="text" v-model="insertForm.cron">
              <template #append>
                <el-link target="_blank" href="https://cron.qqe2.com/">在线生成器</el-link>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="备注" prop="remark" required>
            <el-input type="text" v-model="insertForm.remark"></el-input>
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button type="primary" @click="handleAdd">确定</el-button>
          <el-button @click="statusData.insertDialog=false">取消</el-button>
        </template>
      </el-dialog>
    </el-main>
  </el-container>
</template>
<script setup lang="ts">

import {onBeforeMount, ref} from "vue";
import {
  add,
  deleteTask,
  getDict,
  getJobList,
  getTaskList,
  JobList, JobPost,
  JobPut,
  start,
  stop,
  TaskList,
  update, validateCron
} from "@/api/schedule.ts";
import {Dict} from "@/api/common.ts";
import Row from "@/components/row.vue";
import TagDict from "@/components/dict/tag-dict.vue";
import {Common} from "@/utils/common.ts";

onBeforeMount(() => {
  init()
})

const init = () => {
  initDict()
}

const initDict = () => {
  getDict().then(res => {
    dict.value = res.data.data
  }).then(initTaskList).then(initJobList)
}

const initTaskList = () => {
  getTaskList().then(res => {
    taskList.value = res.data.data
  })
}

const initJobList = () => {
  getJobList().then(res => {
    jobList.value = res.data.data
  })
}

/**
 * 可选任务列表
 */
const taskList = ref<TaskList[]>()

/**
 * 定时任务列表
 */
const jobList = ref<JobList[]>()

/**
 * 字典
 */
const dict = ref<Dict[]>()

/**
 * 任务修改表单
 */
const updateForm = ref<JobPut>({
  cron: "", id: 0
})

/**
 * 增加任务表单
 */
const insertForm = ref({
  bean: "", cron: "", method: "", temp: [], remark: ""
})

/**
 * 状态信息
 */
const statusData = ref({
  updateDialog: false,
  insertDialog: false,
  tempSelect: null
})

const handleStart = (id: number) => {
  start(id).then(res => {
    ElMessage.success(res.data.msg)
    initJobList()
  })
}

const handleStop = (id: number) => {
  stop(id).then(res => {
    ElMessage.success(res.data.msg)
    initJobList()
  })
}

const handleUpdate = () => {
  update(updateForm.value).then(res => {
    ElMessage.success(res.data.msg)
    statusData.value.updateDialog = false
    initJobList()
  })
}

const handleRemove = (id: number) => {
  deleteTask(id).then(res => {
    ElMessage.success(res.data.msg)
    initJobList()
  })
}

const handleEdit = (row: JobList) => {
  updateForm.value.id = row.id
  updateForm.value.cron = row.cron
  statusData.value.updateDialog = true
  updateForm.value.remark = row.remark
}

const handleCronTest = () => {
  validateCron(updateForm.value.cron).then(handleUpdate)
}

const handleAdd = () => {
  validateCron(insertForm.value.cron).then(() => {
    let data: JobPost = {remark: "", bean: "", cron: "", method: ""}
    let post = Common.objectAssign(data, insertForm.value);
    add(post).then(res => {
      ElMessage.success(res.data.msg)
      initJobList()
      statusData.value.insertDialog = false
    })
  })
}

const handleSelect = (bean: string, method: string) => {
  insertForm.value.bean = bean
  insertForm.value.method = method
}

const handleRefresh = () => {
  initJobList()
  initTaskList()
}
</script>
<style scoped>
.main {
  padding: 0;
}

.el-form-item__content > .el-select {
  width: 240px
}

.el-form-item__content > .el-input {
  width: 240px;
}


.el-form {
  text-align: start;
}
</style>